<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>考勤卡添加</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/item.css">
	<style>
		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}

		.cardnumber,
		.entertime {
			background-color: #73c7ec;
			color: white;
		}
	</style>

</head>

<body>
	
	<div class="layui-row" id="vue-root">
		<div class="layui-col-md6 layui-col-md-offset3">
			<div class="layui-form-item">
				<label class="layui-form-label">卡号</label>
				<div class="layui-input-block">
					<input name="cardnumber" v-validate="'required'" autocomplete="off" placeholder="请输入卡号"
						class="layui-input cardnumber" v-model="item.no">
					<div class="checkout_state" v-text="err('cardnumber')">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">有效期至</label>
				<div class="layui-input-block">
					<div class="layui-inline">
						<input name="expiryDate" v-validate="'required'" class="layui-input entertime" id="expiryDate"
							v-model="item.expiryDate">
						<div class="checkout_state" v-text="err('expiryDate')">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>

		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	
	
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		var app = new Vue(merge({
			data: {
				item: {},
				url: '/pc/card'
			},
			created: function () {
				var id = params().id;
				if (!id) {
					this.card.schoolId = top_params().id;
					return;
				}
				this.init();
			},
			methods: {
				formatData: function (data) {
					if (data.expiryDate) data.expiryDate = dayjs(data.expiryDate).format('YYYY-MM-DD HH:mm:ss');
				}
			}
		}));

		laydate.render({
			elem: '#expiryDate',
			type: 'datetime',
			done: function (value, date, endDate) {
				app.item.expiryDate = value;
			}
		});

	</script>

</body>

</html>